'use strict';

import React from "react";
import {
    Image,
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    Animated,
    ActivityIndicator,
    InteractionManager
} from "react-native";
import ParallaxScrollView from "react-native-parallax-scroll-view";
import IntroduceView from "../Components/IntroduceView";
import InfoTypeView from "../Components/InfoTypeView";
import InitiatedQuestion from "./InitiatedQuestion";
import CommentList from "../Components/CommentList";
import ImageViewer from "./ImageViewer";
import Foreground from "../Components/Foreground";
import FixedHeader from "../Components/FixedHeader";
import WatchMapView from "../Components/WatchMapView";
import ViewPager from "react-native-viewpager";
import BottomShareView from "../Components/BottomShareView";
import {_renderStickyHeader} from "../Utils/ViewUtils";
import BottomCommentBtn from "../Components/BottomCommentBtn";
import Global from "../Commom/GlobalConst";
import RuralLibraryAPIService from "../Commom/RuralLibraryAPIService";
let width = Dimensions.get('window').width;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    borderStyles: {
        borderTopWidth: 15,
        borderColor: '#F2F3F5',
    },
    somethingStyle: {
        flexDirection: 'row',
        padding: 5,
        borderColor: '#F2F3F5',
        borderBottomWidth: 1,
        justifyContent: 'space-between'
    },
    button: {
        borderRadius: 5,
        backgroundColor: '#38D68B',
        width: 60,
        height: 30,
        color: 'white',
        textAlign: 'center',
        textAlignVertical: 'center',
    }
});
/**
 * 玩乐详情
 */
class PlayDetailsPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            introduce: {},
            commentList: [],
            nearViewPoints: [],
            flag: false,
            dataSource: new ViewPager.DataSource({
                pageHasChanged: (p1, p2) => p1 !== p2,
            }),
            map: [],
            images: [],
            paddingBottom: new Animated.Value(0),
            phone: null,
            been_to: '0',
            is_collect: 0,
        };
    }

    toQuestion() {
        let navigator = this.props.navigator;
        navigator.push({
            name: 'InitiatedQuestion',
            component: InitiatedQuestion,
            passProps: {}
        });
    }

    viewPagerItemClick() {
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: this.state.images
            }
        })
    }

    componentDidMount() {
        let id = this.props.ID;
        InteractionManager.runAfterInteractions(() => {
            RuralLibraryAPIService.playDetails(Global.Const.token, Global.Const.registeredId, id).then((ret)=> {
                let introduce = {
                    title: ret.title,
                    star: ret.star,
                    typeText: ret.type_text,
                    desc: ret.content,
                    address: ret.address,
                    price: ret.price,
                    time: ret.time,
                    latitude: ret.latitude,
                    longitude: ret.longitude,
                };
                this.setState({
                    map: ret.label,
                    commentList: ret.comment_list,
                    nearViewPoints: ret.near_view_points,
                    introduce,
                    flag: true,
                    images: ret.rural_image,
                    phone: ret.phone,
                    been_to: ret.been_to,
                    is_collect: ret.is_collect,
                    dataSource: this.state.dataSource.cloneWithPages(ret.rural_image),
                });
            }).catch((err)=> {

            });
        });
    }

    refreshComments() {
        let id = this.props.ID;
        RuralLibraryAPIService.playDetails(Global.Const.token, Global.Const.registeredId, id).then((ret)=> {
            this.setState({
                commentList: ret.comment_list,
            });
        }).catch((err)=> {

        });
    }

    _renderViewPager() {
        return (
            <View style={{height: 245,width}}>
                {this.state.images.length > 1
                    ?
                    <ViewPager
                        locked={false}
                        isLoop={true}
                        autoPlay={true}
                        renderPageIndicator={false}
                        renderPage={(page) => {
                    return (
                        <TouchableOpacity onPress={() => this.viewPagerItemClick(page)}>
                            <Image source={{uri:page}}style={{height: 245,width,}}
                            />
                        </TouchableOpacity>
                    )
                }}
                        dataSource={this.state.dataSource}
                    />
                    :
                    <TouchableOpacity onPress={() => this.viewPagerItemClick()}>
                        <Image source={{uri:this.state.images[0]}} style={{height: 245,width}}
                        />
                    </TouchableOpacity>}
            </View>
        )
    }

    render() {
        return (
            <Animated.View style={[styles.container, {paddingBottom: this.state.paddingBottom}]}>
                {
                    this.state.flag && this.state.images.length > 0?
                        <ParallaxScrollView
                            showsVerticalScrollIndicator={false}
                            contentBackgroundColor={'white'}
                            backgroundColor={'white'}
                            headerBackgroundColor="#333"
                            stickyHeaderHeight={ 65 }
                            parallaxHeaderHeight={ 365 }
                            backgroundSpeed={10}
                            renderForeground={() => {
                                return (
                                    <Foreground
                                        height={365}
                                        renderHeader={() => this._renderViewPager()}
                                        size={this.state.dataSource.getPageCount()}
                                        Component={InfoTypeView}
                                        introduce={this.state.introduce}
                                        toQuestion={() => this.toQuestion()}
                                        map={this.state.map}
                                        been_to={this.state.been_to}
                                        is_collect={this.state.is_collect}
                                        id={this.props.ID}
                                        type={1}
                                    />
                                )
                            }}
                            renderStickyHeader={() => _renderStickyHeader(this.state.introduce.title)}
                            renderFixedHeader={() => {
                                return (
                                    <FixedHeader rightFunc={()=> {
                                        this.shareView && this.shareView.showShareView();
                                    }} navigator={this.props.navigator}/>
                                )
                            }}
                        >
                            <IntroduceView introText={this.state.introduce.desc}/>
                            <WatchMapView navigator={this.props.navigator} {...this.state.introduce} type={2}/>
                            {this.state.commentList.length > 0 ?
                                <View style={{
                                padding: 10,
                                paddingRight: 40,
                                borderBottomWidth: 1,
                                borderColor: '#F2F3F5',
                                borderTopWidth: 10,
                            }}>
                                    <Text numberOfLines={1}>
                                        谁来过：
                                        <Text
                                            style={{color: 'black'}}>
                                            {
                                                this.state.commentList.map((item, index) => {
                                                    let name = item.name;
                                                    if (index <= this.state.commentList.length - 2) {
                                                        name += ',';
                                                    }
                                                    return name
                                                })
                                            }
                                        </Text>
                                    </Text>
                                </View> : null}
                            <CommentList commentList={this.state.commentList}
                                         id={this.props.ID} type={1}
                                         navigator={this.props.navigator}/>
                            {this.state.nearViewPoints ? <View style={styles.borderStyles}>
                                <View style={styles.somethingStyle}>
                                    <Text style={{marginLeft: 5}}>附近景点</Text>
                                </View>
                                <View style={{padding: 10, flexDirection: 'row'}}>
                                    {
                                        this.state.nearViewPoints ?
                                            this.state.nearViewPoints.map((item, index) => {
                                                return (
                                                    <TouchableOpacity style={{flex: 1,}}
                                                                      key={'near' + index}
                                                                      onPress={() => {
                                                                          this.props.navigator.replace({
                                                                              name: 'PlayDetailsPage',
                                                                              component: PlayDetailsPage,
                                                                              passProps: {
                                                                                  ID: item.id,
                                                                              }
                                                                          })
                                                                      }}>
                                                        <View >
                                                            <Image style={{width: 90, height: 90}}
                                                                   source={{uri:item.images}}/>
                                                            <Text numberOfLines={1}
                                                                  style={{
                                                                      width: 90,
                                                                      textAlign: 'center',
                                                                      color: '#333',
                                                                      fontSize: 14,
                                                                      marginTop: 5
                                                                  }}>{item.title}</Text>
                                                            <Text numberOfLines={1} style={{
                                                                width: 90,
                                                                color: 'red',
                                                                textAlign: 'center',
                                                                fontSize: 13,
                                                                marginTop: 5
                                                            }}>{item.price}</Text>
                                                        </View>
                                                    </TouchableOpacity>
                                                )
                                            }) : null
                                    }
                                </View>
                            </View> : null}
                        </ParallaxScrollView>
                        : <View style={{flex:1,backgroundColor:'#F5F5F5'}}><View
                        style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                        <View
                            style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                            <ActivityIndicator
                                animating={this.state.animating}
                                style={{ alignItems: 'center',justifyContent: 'center'}}
                                size="large"/>
                            <Text style={{color:'white'}}>加载中...</Text>
                        </View>
                    </View>
                    </View>
                }
                <BottomCommentBtn navigator={this.props.navigator}
                                  phone={this.state.phone}
                                  type={1}
                                  rid={this.props.ID}
                                  refreshComments={()=>this.refreshComments()}
                />
                <BottomShareView
                    shareTitle={ this.state.introduce.title}
                    shareContent={this.state.introduce.desc}
                    shareImageUrl={this.state.images[0]}
                    shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                    ref={(ref) => {this.shareView = ref;}}/>
            </Animated.View>
        );
    }
}

export default PlayDetailsPage;